<script lang="ts" setup name="TestC">
import { ref, useAttrs, inject } from 'vue'
// 运行时声明
// const props = defineProps({
//   type: { type: String, default: 'add'},
//   num: { type: Number, default: 0, required: true},
//   arr: { type: Array, default: () => [1, 2, 3]},
//   data: { type: Object, default: () => ({
//     name: '张三',
//     age: 0
//   })},
// })
// 基于类型
// const props = defineProps<{
//   type?: 'add' | 'edit';
//   num: number;
//   arr?: string[] | number[] | { name: string }[];
//   data: {
//     name: string,
//     age: number
//   };
// }>()
// 单独接口
interface Props {
  type?: 'add' | 'edit';
  num: number;
  arr?: string[] | number[] | { name: string }[];
  data: {
    name: string,
    age: number
  };
}
// const props = defineProps<Props>();
const props = withDefaults(defineProps<Props>(), {
  type: 'add',
  num: 0,
  arr: () => [1, 2, 3],
  data: () => ({
    name: '张三',
    age: 0
  }),
});
const count = ref<number>(props.num);
const changeCount = () => {
  count.value ++;
  // ❌ 警告！prop 是只读的！
  // props.num ++;
  // props.data.age ++;
}
// 运行时声明
// const emit = defineEmits(['aaa'])
// 基于选项
// const emit = defineEmits({
//   aaa: (num: number) => {
//     return typeof num === 'number'
//   }
// })
// 基于类型
// const emit = defineEmits<{
//   (e: 'aaa', num: number): void
// }>()
// 3.3+: 可选的、更简洁的语法
const emit = defineEmits<{
  aaa: [ num: number ]
}>()
const emitEvent = () => {
  emit('aaa', count.value)
}

// $attrs
const myattrs = useAttrs()
console.log('myattrs', myattrs); 

const title = inject<string>('title');

const msg = ref('');
const el = ref<HTMLInputElement | null>(null);
const focus = () => {
  el.value?.focus()
}
defineExpose({
  focus,
  title
})
</script>

<template>
  <div class="testc">
    <p>TestC组件</p>
    <div>{{ 'title: ' + title }}</div>
    <div>{{ 'type: ' + props.type }}</div>
    <div>{{ 'num: ' + props.num }}</div>
    <div>{{ 'data.name: ' + props.data.name }}</div>
    <div>{{ 'data.age: ' + props.data.age }}</div>
    <div>{{ 'count: ' + count }}</div>
    <button @click="changeCount">更改count</button>
    <button @click="emitEvent">emit</button>
    <span>{{ msg }}</span>
    <input v-model="msg" ref="el" />
  </div>
  
</template>
<style scoped>
.testc {
  border: 1px solid #dedede;
  padding: 10px;
  line-height: 24px;
}
</style>
